<template>
	<view class="custom">
	      <view class="custom-content d-flex a-center j-center">
	          <view class="content-card d-flex d-r a-center j-center">
					<template v-if="message?.inviterId != ''">
						<!--
						<text class="card-text">{{nickName(message?.inviterId,message?.inviterName)}}邀请{{nickName(message?.applicant,message?.applicantNick)}}加入群聊</text>
						-->
						<text class="card-text" style="color: #1DC691;">{{nickName(message?.inviterId,message?.inviterName)}}</text>
						<text class="card-text">邀请</text>
						<text class="card-text" style="color: #1DC691;">{{nickName(message?.applicant,message?.applicantNick)}}</text>
						<text class="card-text">加入群聊</text>
					</template>
					<template v-else>
						<text class="card-text" style="color: #1DC691;">{{nickName(message?.applicant,message?.applicantNick)}}</text>
						<text class="card-text">加入群聊</text>
					</template>
					<!--
					<text v-if="message?.inviterId != ''" class="card-text">{{nickName(message?.inviterId,message?.inviterName)}}邀请{{nickName(message?.applicant,message?.applicantNick)}}加入群聊</text>
					<text v-else class="card-text">{{nickName(message?.applicant,message?.applicantNick)}}加入群聊</text>
					-->
				</view>
	      </view>
	</view>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
import { userData as userDataStore } from "@/store/userData";
import { imStore } from "@/store/imStore";

const userData: any = userDataStore();
const MessageRedRob = defineComponent({
	props: {
		data: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	setup(props:any, ctx:any) {
		const IM_STORE = imStore();
		const data = reactive({
			message: {} as any,
			userData: {} as any,
		});
		watchEffect(()=>{
			data.message = props.data;
			data.userData = userData;
			//console.log(data.message)
		});
		//获取备注名称
		const nickName = (userId:string,nick:string) => {
			let remark = null;
			let nameCard = null;
			IM_STORE.friends.forEach((f: any) => {
				if (f.userID === userId) {
					remark = f.remark;
				}
			});
			let type  = IM_STORE?.conversation?.type;
			if (type === "GROUP") {
				let userData:any = IM_STORE?.groupMembers.find((item:any) => item.userID === userId);
				if(userData?.nameCard !='')nameCard = userData?.nameCard
			}
			return remark || nameCard || nick;
		};
		return {
			...toRefs(data),
			nickName
		};
	}
});
export default MessageRedRob
</script>

<style lang="scss" scoped>

.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}

.custom {
    .custom-content{
        width:750rpx;
        .content-card{
            padding:0 30rpx;
            border-radius: 25rpx;
            height:50rpx;
			.card-text{
				padding-left: 6rpx;
				font-size: 24rpx;
				color: #666;
				font-weight: 400;
            }
			.card-uline{
				font-size: 24rpx;
				color: #FF7840;
				font-weight: 400;
			}

        }
    }

}
</style>